<script setup>

import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {pushRequiredGoodsService} from "@/api/requiredGoods.js";
import {ElMessage} from "element-plus";
const title = ref('');
const route = useRouter();
onMounted(()=>{
  title.value = route.currentRoute.value.meta.title;
  document.title = title.value;
})
const pushRequiredGoodsData = reactive({
  content:''
})

const goBack = ()=>{
  pushRequiredGoodsData.content = '';
  route.go(-1);
}
const submit =async ()=>{
  if (pushRequiredGoodsData.content === '') return;
  await pushRequiredGoodsService(pushRequiredGoodsData)
  pushRequiredGoodsData.content = '';
  ElMessage.success('发布成功')
}
</script>

<template>
<div class="container">
  <div class="main">
    <div class="content">
      <p>求购信息 :</p>
      <el-input v-model="pushRequiredGoodsData.content" size="large" type="textarea" placeholder="请输入求购信息" resize="none"/>
      <div style="display: flex;justify-content: space-between;margin-top: 40px">
        <el-button @click="goBack()">返回</el-button>
        <el-button type="primary" @click="submit()">发布</el-button>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  background-color: #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
  .main{
    width: 30%;
    height: 25%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: #e7e7e7 0px 0px 10px;
    display: flex;
    justify-content: center;
    padding: 20px;
    .content{
      width: 80%;
      height: 70%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>